<!DOCTYPE html>
<html>
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?bf515042093c3de99a0ba28c661b07b4";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>formSelects 基于Layui的多选解决方案</title>
		<link rel="stylesheet" type="text/css" href="../UI/layui-v2.3.0-rc1/layui/css/layui.css" />
		<link href="../UI/SyntaxHighlighter-3.0.83/shCore.css" rel="stylesheet">
		<link href="../UI/SyntaxHighlighter-3.0.83/shThemeEclipse.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../dist/formSelects-v4.css"/>
		<style type="text/css">
			.syntaxhighlighter {overflow-y: hidden !important;}
			.syntaxhighlighter .toolbar{background: none !important;}
			.syntaxhighlighter .toolbar a {display: none !important;}
			.layui-colla-content{padding: 0 10px;}
			/*.syntaxhighlighter .toolbar a{display: none !important;}*/
			.chat{font-size: 16px; color: #4f4f4f;  font-weight: 400; line-height: 26px; margin: 0 0 30px; text-align: justify;}
			.chat > a{color: #01AAED;}
			.chat > span{margin-right: 20px; -webkit-user-select: text; display: inline-block;}	
			.title{margin-bottom: 20px; line-height: 60px; padding-bottom: 10px; color: #393D49; border-bottom: 1px solid #eee; font-size: 28px; font-weight: 300;}	
			.layui-elem-quote{padding: 5px 15px; color: #393D49; font-size: 18px; border-width: 0px 0px 0px 5px;}
			.sun-menu{-webkit-user-select: none;}
			.layui-table, .layui-collapse, .example{margin-bottom: 30px;}
			.example h3{margin: 15px 0 10px;font-weight: 400; color: #1f2f3d;font-size: 16px;}
			.example p{font-size: 14px; color: #5e6d82; line-height: 1.5em;margin: 15px 0 10px;}
			.example > div{padding: 20px; border: 1px solid #ebebeb; border-radius: 3px;transition: .2s;}
			.example-show-code{margin-left: 30px; height: 36px; line-height: 36px;}
			.example-btn{margin-left: 30px; height: 36px; line-height: 36px;}
			.layui-layer-content{max-height: 600px;}
			.over .line{margin-bottom: 10px!important;}
			js{display: none;}
			#openChat{position: fixed; right: 10px; bottom: 10px;}
			.layui-layer[type="iframe"] .layui-layer-setwin{right: 453px;}
		</style>
	</head>

	<body style="padding: 20px;">
		
		<h1>formSelects停止维护, 已经迁移至<a href="https://gitee.com/maplemei/xm-select">xm-select</a></h1>
		
		<div class="title">formSelects-v4.js 基于Layui的多选解决方案 </div>
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="start">1、闲谈杂趣</blockquote>
		<div class="chat">
			<a href="https://faysunshine.com/layui/template/index.html?0-3" target="_blank">v3传送门</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="https://faysunshine.com/layui/site/template/doc.html?formSelects" target="_blank">v3文档</a><br />
			其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行...
		</div>
		<div>
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="concat">2、交流学习</blockquote>
		<div class="chat">
			<span>QQ号: 707200833</span>
			<span>QQ群: 769620939</span>
			<span><a target="_blank" class="qqicon" href="//shang.qq.com/wpa/qunwpa?idkey=9f9d4de074f2cb4d13afb3f04b874742a5f400eac2c0648fcfd20afb5413fb0a"><img border="0" src="../UI/group.png" alt="技术交流群" title="技术交流群"></a></span>
			<br/>
			<b style="color: red;">重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主</b>
			<br/>
			群主会在第一时间把代码更新至<a href="https://github.com/hnzzmsf/layui-formSelects" target="_blank">GitHub</a>, 
			你可以前往<a href="https://github.com/hnzzmsf/layui-formSelects" target="_blank">GitHub</a>下载formSelects完整代码, 以便于二次开发<br /><br />
			<iframe src="https://ghbtns.com/github-btn.html?user=hnzzmsf&amp;repo=layui-formSelects&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="156px" height="30px"></iframe>
			<iframe src="https://ghbtns.com/github-btn.html?user=hnzzmsf&amp;repo=layui-formSelects&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="156px" height="30px"></iframe>
		</div>
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="download">3、下载与使用</blockquote>
		<div class="chat">
			下载地址: <a href="https://github.com/hnzzmsf/layui-formSelects" target="_blank">GitHub</a><br />
			使用文档:	<a href="https://hnzzmsf.github.io/example/example_v4.html" target="_blank">GitHub Pages</a><br />
			
			使用方式: 
			<div class="layui-collapse">
				<div class="layui-colla-item">
					<div class="layui-colla-content layui-show" sid="use" style="border-top-width: 0;"></div>
					
					<h2>一个简单的小例子</h2>
					<iframe height="500" style="width: 100%;" scrolling="no" title="xorKdr" src="//codepen.io/hnzzmsf/embed/xorKdr/?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
					  See the Pen <a href='https://codepen.io/hnzzmsf/pen/xorKdr/'>xorKdr</a> by maplemei
					  (<a href='https://codepen.io/hnzzmsf'>@hnzzmsf</a>) on <a href='https://codepen.io'>CodePen</a>.
					</iframe>
				</div>
			</div>
		</div>
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="options">4、基本参数</blockquote>
		<table class="layui-table">
		  	<colgroup>
			    <col width="250">
			    <col width="400">
			    <col>
		  	</colgroup>
		  	<thead>
		    	<tr>
			      	<th>属性名</th>
			      	<th>说明</th>
			      	<th>示例</th>
		    	</tr> 
		  	</thead>
		  	<tbody>
		    	<tr>
		      		<td>xm-select</td>
		      		<td>多选核心, 标记不同的多选, 多选ID</td>
		      		<td>xm-select="id"</td>
		    	</tr>
		    	<tr>
		      		<td>xm-select-max</td>
		      		<td>多选最多选择数量</td>
		      		<td>xm-select-max="3"</td>
		    	</tr>
		    	<tr>
		      		<td>xm-select-skin</td>
		      		<td>皮肤</td>
		      		<td>xm-select-skin=" default | primary | normal | warm | danger "</td>
		    	</tr>
		    	<tr>
		      		<td>xm-select-search</td>
		      		<td>本地搜索 &amp; 远程搜索</td>
		      		<td>xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索</td>
		    	</tr>
		    	<tr>
		      		<td>xm-select-create</td>
		      		<td>条目不存在时创建, 标记性属性</td>
		      		<td>xm-select-create</td>
		    	</tr>
		    	<tr>
		      		<td>xm-select-direction</td>
		      		<td>下拉方向</td>
		      		<td>xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式</td>
		    	</tr>
		    	<!-- <tr>
		      		<td>xm-select-height</td>
		      		<td>标记select高度是否固定</td>
		      		<td>xm-select-height="36px", 高度不再随数据变化而变化</td>
		    	</tr> -->
		    	<tr>
		      		<td>xm-select-radio</td>
		      		<td>单选模式</td>
		      		<td>xm-select-radio, 最多只能选择一个</td>
		    	</tr>
		    	<tr>
		      		<td>xm-select-search-type</td>
		      		<td>搜索框的显示位置</td>
		      		<td>xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示</td>
		    	</tr>
		    	<tr>
		      		<td>xm-select-show-count</td>
		      		<td>多选显示的label数量</td>
		      		<td>xm-select-show-count="2", 超出后隐藏</td>
		    	</tr>
		  </tbody>
		</table>
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="methods">5、基本方法</blockquote>
		<div class="layui-collapse">
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-value" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1) value">value</h2>
			    <div class="layui-colla-content layui-show" sid="value"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-on" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2) on">on</h2>
			    <div class="layui-colla-content layui-show" sid="on"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-maxTips" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3) maxTips">maxTips</h2>
			    <div class="layui-colla-content layui-show" sid="maxTips"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-filter" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4) filter">filter</h2>
			    <div class="layui-colla-content layui-show" sid="filter"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-config" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5) config">config</h2>
			    <div class="layui-colla-content layui-show" sid="config"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-render" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6) render">render</h2>
			    <div class="layui-colla-content layui-show" sid="render"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-disabled" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7) disabled">disabled</h2>
			    <div class="layui-colla-content layui-show" sid="disabled"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-undisabled" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8) undisabled">undisabled</h2>
			    <div class="layui-colla-content layui-show" sid="undisabled"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-data" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9) data">data</h2>
			    <div class="layui-colla-content layui-show" sid="data"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-btns" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10) btns">btns</h2>
			    <div class="layui-colla-content layui-show" sid="btns"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-search" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11) search">search</h2>
			    <div class="layui-colla-content layui-show" sid="search"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-opened" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12) opened">opened</h2>
			    <div class="layui-colla-content layui-show" sid="opened"></div>
		  	</div>
		  	<div class="layui-colla-item">
			    <h2 class="layui-colla-title" id="methods-closed" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13) closed">closed</h2>
			    <div class="layui-colla-content layui-show" sid="closed"></div>
		  	</div>
		</div>
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="examples">6、基础示例</blockquote>
		<div class="example">
			<h3 id="select_default" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1) 基础多选">基础多选</h3>
			<p>适用性较广的基础多选，用 Tag 展示已选项</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select1">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_pane" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2) pane模式">pane模式</h3>
			<p>layui pane模式</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form layui-form-pane">
						<div class="layui-form-item">
							<label class="layui-form-label">多选框</label>
							<div class="layui-input-block">
								<select name="city" xm-select="select2">
									<option value="1" disabled="disabled">北京</option>
									<option value="2" selected="selected" disabled="disabled">上海</option>
									<option value="3">广州</option>
									<option value="4" selected="selected">深圳</option>
									<option value="5">天津</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_group" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3) 分组多选">分组多选</h3>
			<p>基于layui的分组多选</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select3">
						<optgroup label="分组1">
							<option value="1" disabled="disabled">北京</option>
							<option value="2" selected="selected">上海</option>
						</optgroup>
						<optgroup label="分组2">
							<option value="3">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5">天津</option>
						</optgroup>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_tips" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4) 自定义tips">自定义tips</h3>
			<p>写一个空的option放在第一个</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select4">
						<option value="">啦啦, 我是自定义的</option>
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_max" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5) 多选上限">多选上限</h3>
			<p>xm-select-max="3", 超过3个后, 默认闪烁红框提示</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select5" xm-select-max="3">
						<option value="">啦啦, 我是自定义的</option>
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>当然, 如果你初始化值就多于max值, 那是可以设置成功滴, 取消了就选不回来了</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select5_2" xm-select-max="3">
						<option value="">啦啦, 我是自定义的</option>
						<option value="1" disabled="disabled" selected="selected">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3" selected="selected">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_skin" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6) 多选皮肤">多选皮肤</h3>
			<p>xm-select-skin="default"</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select6_1" xm-select-skin="default">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>xm-select-skin="primary", 这个墨绿style已经被内置成为了经典皮肤, 只因他诞生于layui的经典颜色</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select6_2" xm-select-skin="primary">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>xm-select-skin="normal"</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select6_3" xm-select-skin="normal">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>xm-select-skin="warm"</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select6_4" xm-select-skin="warm">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>xm-select-skin="danger"</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select6_5" xm-select-skin="danger">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_search_local" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7) 本地搜索">本地搜索</h3>
			<p>xm-select-search, 搜索已存在的option</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select7_1" xm-select-search>
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>分组中的搜索</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select7_2" xm-select-search>
						<optgroup label="分组1">
							<option value="1" disabled="disabled">北京</option>
							<option value="2" selected="selected">上海</option>
						</optgroup>
						<optgroup label="分组2">
							<option value="3">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5">天津</option>
						</optgroup>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_search_server" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8) 远程搜索">远程搜索</h3>
			<p>xm-select-search="/search", 指定一个url, 将开启远程搜索模式</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select8" xm-select-search="https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
				<p>远程搜索response结构, 其中name, value可以自定义, 请查看<a href="#methods-config">method config</a></p>
				<p>code为0时, 表示正常, 不为0时则提示msg信息</p>
<pre class="brush: js">
{
    "code": 0,
    "msg": "success",
    "data": [
        {"name":"北京","value":1,"selected":"","disabled":""},
        {"name":"上海","value":2,"selected":"","disabled":""},
        {"name":"广州","value":3,"selected":"selected","disabled":""},
        {"name":"深圳","value":4,"selected":"","disabled":"disabled"},
        {"name":"天津","value":5,"selected":"","disabled":""}
    ]
}
</pre>
			</div>
			<p>当然, 远程搜索也是可以分组的</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select8_2" xm-select-search="https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/group">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
<pre class="brush: js">
{
    "code": 0,
    "msg": "success",
    "data": [
    	{"name": "分组-1", "type": "optgroup"},
        {"name":"北京","value":1,"selected":"","disabled":""},
        {"name":"上海","value":2,"selected":"","disabled":""},
        {"name": "分组-2", "type": "optgroup"},
        {"name":"广州","value":3,"selected":"selected","disabled":""},
        {"name":"深圳","value":4,"selected":"","disabled":"disabled"},
        {"name":"天津","value":5,"selected":"","disabled":""}
    ]
}
</pre>
			</div>
		</div>
		<div class="example">
			<h3 id="select_create" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9) 创建条目">创建条目</h3>
			<p>xm-select-create, 不存在时会创建, 选中后长久保留, value为Date.now()生成</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select9" xm-select-search xm-select-create>
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_direction" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10) 下拉方向">下拉方向</h3>
			<p>方式一: xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式</p>
			<p>方式二: 使用formSelects.config配置</p>
<pre class="brush: js">
//配置某一个多选的方向
layui.formSelects.config('select1', {direction: 'up'});

//配置所有多选的方向
layui.formSelects.config({direction: 'up'});
</pre>
			<p>我是朝上的</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select10_1" xm-select-direction="up">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>我是朝下的</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select10_2" xm-select-direction="down">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>其他的都是自动处理的哈, 当然没有朝左朝右的</p>
			<p>我是一个动态的</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<select name="city" xm-select="select10_3" xm-select-direction="down">
						<option value="1" disabled="disabled">北京</option>
						<option value="2" selected="selected">上海</option>
						<option value="3">广州</option>
						<option value="4" selected="selected">深圳</option>
						<option value="5">天津</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-normal example-btn" onclick="formSelects.config('select10_3', {direction: 'up'});">点我朝上</button>
				<button class="layui-btn layui-btn-normal example-btn" onclick="formSelects.config('select10_3', {direction: 'down'});">点我朝下</button>
			</div>
		</div>
		
		<div class="example">
			<h3 id="select_height" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11) 固定高度">固定高度</h3>
			<p>xm-select-height="36px", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select11" xm-select-height="36px">
							<option value="1" selected="selected">北京</option>
							<option value="2" selected="selected">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected">杭州</option>
						</select>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		
		<div class="example">
			<h3 id="select_disabled" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12) 禁用select">禁用select</h3>
			<p>disabled="disabled", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select12" disabled="disabled">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected">杭州</option>
						</select>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>动态操作select的启用与禁用</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select12_2" disabled="disabled">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected">杭州</option>
						</select>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
				<button class="layui-btn layui-btn-normal example-btn" onclick="formSelects.undisabled('select12_2')">点我启用</button>
				<button class="layui-btn layui-btn-normal example-btn" onclick="formSelects.disabled('select12_2')">点我禁用</button>
				<button class="layui-btn layui-btn-normal example-btn" onclick="formSelects.undisabled()">全部启用</button>
				<button class="layui-btn layui-btn-normal example-btn" onclick="formSelects.disabled()">全部禁用</button>
			</div>
		</div>
		
		<div class="example">
			<h3 id="select_radio" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13) 单选模式">单选模式</h3>
			<p>xm-select-radio, 单选模式</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select13" xm-select-radio>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected" >杭州</option>
						</select>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		
		<div class="example">
			<h3 id="select_form" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;14) 表单操作">表单操作</h3>
			<p>支持layui原生表单验证, lay-verify="xxx"</p>
			<div class="layui-form">
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select14" lay-verify="select14">
							<option value="">选择3项以上通过验证</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
							<option value="6">杭州</option>
						</select>
					</div>
				</div>
				<button class="layui-btn example-btn" lay-submit lay-filter="select14">验证提交</button>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>tips模式, lay-verify="required", lay-verType="tips"</p>
			<div class="layui-form">
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select14_1" lay-verify="required" lay-verType="tips">
							<option value="">选择3项以上通过验证</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
							<option value="6">杭州</option>
						</select>
					</div>
				</div>
				<button class="layui-btn example-btn" lay-submit lay-filter="select14_1">验证提交</button>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>支持表单提交自动赋值, 只需要在select加上name属性即可, 点击提交可查看url的变化</p>
			<div>
				<form class="layui-form" action="">
					<div style="width: 400px; display: inline-block; vertical-align: top;">
						<div class="layui-form">
							<select name="city" xm-select="select14_2">
								<option value="1" selected="selected">北京</option>
								<option value="2" selected="selected">上海</option>
								<option value="3">广州</option>
								<option value="4">深圳</option>
								<option value="5">天津</option>
								<option value="6">杭州</option>
							</select>
						</div>
					</div>
					<button class="layui-btn layui-btn-normal example-btn" type="submit">提交表单</button>
					<button class="layui-btn layui-btn-normal example-show-code" type="button">查看代码</button>
				</form>
			</div>
			<p>支持reset操作, 选择几项数据, 然后点击重置</p>
			<div>
				<form class="layui-form">
					<div style="width: 400px; display: inline-block; vertical-align: top;">
						<div class="layui-form">
							<select name="city" xm-select="select14_3">
								<option value="">默认提示</option>
								<option value="1" selected="selected">北京</option>
								<option value="2">上海</option>
								<option value="3">广州</option>
								<option value="4">深圳</option>
								<option value="5">天津</option>
								<option value="6">杭州</option>
							</select>
						</div>
					</div>
					<button class="layui-btn layui-btn-normal example-btn" type="reset">重置表单</button>
					<button class="layui-btn layui-btn-normal example-show-code" type="button">查看代码</button>
				</form>
			</div>
		</div>
		
		<div class="example">
			<h3 id="select_linkage" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15) 多选联动">多选联动</h3>
			<p>多选联动, 联动需要使用data来赋值, 先给一个空select标记多选, <b>记得value不能重复哦</b></p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select15">
							<option value="">请选择, 此处是联动多选</option>
						</select>
						<js>
							layui.formSelects.data('select15', 'local', {
							    arr: [
							        {
							        	"name": "北京", 
							        	"value": 1, 
							        	"children": [
											{"name": "北京市1", "value": 12, "children": [
												{"name": "朝阳区1", "value": 13, "children": []},
												{"name": "朝阳区2", "value": 14, "children": []},
												{"name": "朝阳区3", "value": 15, "children": []},
												{"name": "朝阳区4", "value": 16, "children": []},
											]},
											{"name": "北京市2", "value": 17, "children": []},
											{"name": "北京市3", "value": 18, "children": []},
											{"name": "北京市4", "value": 19, "children": []},
							        	]
									},
									{
							        	"name": "天津", 
							        	"value": 2, 
							        	"children": [
											{"name": "天津市1", "value": 51, "children": []},
							        	]
									},
							    ],
							    linkage: true
							});
							
							//如果有需要默认值的小伙伴请使用formSelects.value
							formSelects.value('select15', ['1/12/13', '1/12/14'])
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>多选联动, 使用远程数据实现省市区三级联动</p>
			<p>宽度是可以自定义的, linkageWidth: 130, 默认100</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select15_2">
							<option value="">请选择, 此处是联动多选</option>
						</select>
						
						<js>
							formSelects.config('select15_2', {
								success: function(id, url, val, result){
									console.log("success回调: " + url);
								},
								error: function(id, url, val, err){
									console.log("err回调: " + url);
								}
							});
							
							formSelects.data('select15', 'server', {
								url: 'http://yapi.demo.qunar.com/mock/9813/layui/citys',
							    linkage: true,
							    linkageWidth: 130
							});
							
							//如果有需要默认值的小伙伴请使用formSelects.value
							formSelects.value('select15', ['1/12/13', '1/12/14'])
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_btns" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;16) 快捷操作">快捷操作</h3>
			<p>设置内置的快捷操作</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select16_1">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected" >杭州</option>
						</select>
						<js>
							formSelects.btns('select16_1', ['select', 'remove', 'reverse', 'skin']);
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>自定义快捷操作</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select16_2">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected" >杭州</option>
						</select>
						<js>
							formSelects.btns('select16_2', ['select', 'remove', 'skin', {
							    icon: 'layui-icon layui-icon-ok',   //自定义图标, 可以使用layui内置图标
							    name: '提示名称',
							    click: function(id){
							        //点击后的操作
							        alert('点击了自定义快捷操作')
							    }
							}]);
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>你是可以换数组位置, 更换显示位置滴</p>
			<p>如果内置操作不满意, 完全可以自定义</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select16_3">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected" >杭州</option>
						</select>
						<js>
							formSelects.btns('select16_3', ['skin', {
							    icon: 'layui-icon layui-icon-ok',   //自定义图标, 可以使用layui内置图标
							    name: '提示名称',
							    click: function(id){
							        //点击后的操作
							        alert('点击了自定义快捷操作')
							    }
							}, 'remove']);
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>如果不需要快捷操作, 设置一个空数组就可以了, 它会变回以前的模样</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select16_4">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3" selected="selected">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
							<option value="6" selected="selected" >杭州</option>
						</select>
						<js>
							formSelects.btns('select16_4', []);
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>只显示图标</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select16_5">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
							<option value="6">杭州</option>
						</select>
						<js>
							formSelects.btns('select16_5', ['select', 'remove'], {show: 'icon'});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>只显示名称</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select16_6">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
							<option value="6">杭州</option>
						</select>
						<js>
							formSelects.btns('select16_6', ['select', 'remove'], {show: 'name'});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>显示图标+名称, 但是是紧凑型的</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="select16_7">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
							<option value="6">杭州</option>
						</select>
						<js>
							formSelects.btns('select16_7', ['select', 'remove'], {show: '', space: '10px'});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="examples2">7、进阶示例</blockquote>
		<div class="example">
			<h3 id="select_on" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1) 监听select选择">监听select选择</h3>
			<p>适用于动态操作</p>
			<p>选择[北京]时, 会发现选不上哦</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example1">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
						</select>
						<js>
							layui.formSelects.on('example1', function(id, vals, val, isAdd, isDisabled){
								//id: 			点击select的id
								//vals:			当前select已选中的值
								//val:			当前select点击的值
								//isAdd:		当前操作选中or取消
								//isDisabled:	当前选项是否是disabled
								alert("选择了: " + val.name);
								//如果return false, 那么将取消本次操作
								if(val.value == 1){
									return false;
								}
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>获取实时数据</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example1_1">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
						</select>
						<js>
							layui.formSelects.on('example1_1', function(id, vals, val, isAdd, isDisabled){
								//id: 			点击select的id
								//vals:			当前select已选中的值
								//val:			当前select点击的值
								//isAdd:		当前操作选中or取消
								//isDisabled:	当前选项是否是disabled
								alert("当前选择了: " + JSON.stringify(vals));
							}, true);
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_value" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2) 赋值与取值">赋值与取值</h3>
			<p>多选取值</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example2_1">
							<option value="1" selected="selected">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
						</select>
						<js>
							layui.formSelects.value('example2_1');				//取值默认数组
							layui.formSelects.value('example2_1', 'val');		//取值val数组
							layui.formSelects.value('example2_1', 'valStr');	//取值val字符串
							layui.formSelects.value('example2_1', 'name');		//取值name数组
							layui.formSelects.value('example2_1', 'nameStr');	//取值name字符串
						</js>
					</div>
				</div>
				<button class="layui-btn example-btn" onclick="alert(JSON.stringify(formSelects.value('example2_1')))">默认数组</button>
				<button class="layui-btn example-btn" onclick="alert(JSON.stringify(formSelects.value('example2_1', 'val')))">val数组</button>
				<button class="layui-btn example-btn" onclick="alert(JSON.stringify(formSelects.value('example2_1', 'valStr')))">val字符串</button>
				<button class="layui-btn example-btn" onclick="alert(JSON.stringify(formSelects.value('example2_1', 'name')))">name数组</button>
				<button class="layui-btn example-btn" onclick="alert(JSON.stringify(formSelects.value('example2_1', 'nameStr')))">name字符串</button>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			
			<p>多选赋值</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example2_2">
							<option value="1" selected="selected">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
						</select>
						<js>
							layui.formSelects.value('example2_2', []);			//赋值空数组, 清空所有
							layui.formSelects.value('example2_2', [1, 2]);		//赋值 北京,上海
							layui.formSelects.value('example2_2', [5], true);	//追加赋值 天津
							layui.formSelects.value('example2_2', [1], false);	//删除 已选择 [北京]
						</js>
					</div>
				</div>
				<button class="layui-btn example-btn" onclick="formSelects.value('example2_2', [])">清空所有</button>
				<button class="layui-btn example-btn" onclick="formSelects.value('example2_2', [1, 2])">赋值 北京,上海</button>
				<button class="layui-btn example-btn" onclick="formSelects.value('example2_2', [5], true)">追加赋值 天津</button>
				<button class="layui-btn example-btn" onclick="formSelects.value('example2_2', [1], false)">删除 已选择 [北京]</button>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_maxtips" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3) 超选后的提示">超选后的提示</h3>
			<p>如果设置了xm-select-max="3", 当你选择第四个的时候会默认闪烁红框提示, 当然这个提示你可以自定义</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example3" xm-select-max="2">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4" selected="selected">深圳</option>
							<option value="5" selected="selected">天津</option>
						</select>
						<js>
							layui.formSelects.maxTips('example3', function(id, vals, val, max){
							    //id:   点击select的id
							    //vals: 当前select已选中的值
							    //val:  当前select点击的值
							    //max:  当天多选最大值
							    alert("选超了, 选择的值: " + val.value);
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_filter" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4) 自定义搜索">自定义搜索</h3>
			<p>如果设置了xm-select-search="", 当你搜索的时候是默认判断选项文本是否包含搜索的值</p>
			<p>如下是检测 全拼,简拼,文本是否包含, 其中汉字转拼音摘录于网络</p>
			<p>可以尝试使用拼音进行搜索</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example4" xm-select-search="">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
						</select>
						<js>
							layui.formSelects.filter('example4', function(id, inputVal, val, isDisabled){
							    if(
							    	PY.fullPY(val.name).toLowerCase().indexOf(inputVal) != -1 ||	//拼音全拼是否包含
							    	PY.fullPY(val.name, true).indexOf(inputVal) != -1 ||			//拼音简拼是否包含
							    	val.name.indexOf(inputVal) != -1 								//文本是否包含
							   	){
							    	return false;
							    }
							    return true;
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>友情提示: 远程搜索是不会经过此方法滴</p>
		</div>
		<div class="example">
			<h3 id="select_config" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5) 配置">配置</h3>
			<p>说起来这是个又爱又恨的方法, 设计之初是准备专门配置远程搜索用的, 无奈后面增加了很多东西, 结果变成了专门的配置方法了</p>
			<p>好像没啥好说的, 都是点儿配置的东西, 说点儿场景吧</p>
			<p> - 默认本地数据, js动态配置成远程搜索, 首先开启搜索模式 xm-select-search="", 然后config中定义url, 适用于url为可变参数的情况下</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example5_1" xm-select-search="">
							<option value="">哈哈, 默认是没有的, 显示的是远程数据</option>
						</select>
						<js>
							layui.formSelects.config('example5_1', {
								searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data'
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p> - 点击加载</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example5_2" xm-select-search="">
							<option value="">哈哈, 默认是没有的</option>
						</select>
						<js>
							layui.formSelects.config('example5_2', {
								searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data'
							});
						</js>
					</div>
				</div>
				<button class="layui-btn example-btn" onclick="formSelects.config('example5_2', {searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data'})">点我加载</button>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p> - beforeSuccess的用法</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example5_3" xm-select-search="">
							<option value="">哈哈, 默认是没有的</option>
						</select>
						<js>
							layui.formSelects.config('example5_3', {
								searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
								beforeSuccess: function(id, url, searchVal, result){
									//我要把数据外层的code, msg, data去掉
									result = result.data;
									//我要反转name
									$.each(result, function(index, item) {
										item.name && (item.name = item.name.split('').reverse().join(''))
									});
									//然后返回数据
									return result;
								}
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>当然上面的处理方法是用于演示beforeSuccess的用法的, 正确的姿势应该是转换数据结构滴</p>
			<p>success, error可以直接打开控制台, 查看console的打印记录</p>
			<p><b>远程数据的赋值</b></p>
			<p>远程数据是使用ajax异步的模式来获取的, 所以赋值不能直接在config之后</p>
			<p>方式一: 在返回数据中包含selected属性</p>
			<p>方式二: 在success回调中使用value进行赋值</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example5_4" xm-select-search="">
							<option value="">哈哈, 我没赋值成功</option>
						</select>
						<js>
							layui.formSelects.config('example5_4', {
								searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
								success: function(id, url, searchVal, result){
									formSelects.value('example5_4', [3, 4]);
								}
							});
							//赋值失败了, 我的天, 什么情况, 结果发现对应3,4的value根本不存在!!! 请往下看
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>上面好像不太对</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example5_5" xm-select-search="">
							<option value="">哈哈, 默认是没有的</option>
						</select>
						<js>
							layui.formSelects.config('example5_5', {
								searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
								success: function(id, url, searchVal, result){
									formSelects.value('example5_5', [result.data[0].value, result.data[4].value]);
								}
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_data" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6) 动态数据">动态数据</h3>
			<p>本地数据</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example6_1">
							<option value="">来自星星的你</option>
						</select>
						<js>
							layui.formSelects.data('example6_1', 'local', {
							    arr: [
							        {"name": "分组-1", "type": "optgroup"},
							        {"name": "北京", "value": 1},
							        {"name": "上海", "value": 2},
							        {"name": "分组-2", "type": "optgroup"},
							        {"name": "广州", "value": 3},
							        {"name": "深圳", "value": 4},
							        {"name": "天津", "value": 5}
							    ]
							});
							//佛曰, 格式不可变, 不喜欢 name,value 可以使用config重新定义
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>远程数据, 也许你只希望加载一次, 而不是搜索一次变一次, 这个更适合你</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example6_2">
							<option value="">来自星星的你</option>
						</select>
						<js>
							layui.formSelects.data('example6_2', 'server', {
							    url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data'
							});
							//佛曰, 格式不可变, 不喜欢 name,value 可以使用config重新定义
							//同样适合剥去外皮, 同样可以使用config beforeSuccess处理数据, 不过你需要这么写
							layui.formSelects.config('example6_2', {
								beforeSuccess: function(id, url, searchVal, result){
									//我要把数据外层的code, msg, data去掉
									result = result.data;
									//我要反转name
									$.each(result, function(index, item) {
										item.name && (item.name = item.name.split('').reverse().join(''))
									});
									//然后返回数据
									return result;
								}
							}).data('example6_2', 'server', {
							    url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data'
							});
							//使用了新增的链接写法, 当然你也可以分开写
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>不知道你们为什么吐槽我的设计, 也许真的是不好, 新增如下写法</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example6_3">
							<option value="">来自星星的你</option>
						</select>
						<js>
							layui.formSelects.data('example6_3', 'server', {
							    url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
							    beforeSuccess: function(id, url, searchVal, result){
									//我要把数据外层的code, msg, data去掉
									result = result.data;
									//我要反转name
									$.each(result, function(index, item) {
										item.name && (item.name = item.name.split('').reverse().join(''))
									});
									//然后返回数据
									return result;
								},
								success: function(id, url, searchVal, result){
									console.log('id: example6_3, 成功返回数据!!!');
								}
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>来一发树状结构压压惊</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example6_4">
							<option value="">此树是我栽</option>
						</select>
						<js>
							//这里面的自由参数可以在template中使用
							//只是加了一个树状展示形式, 过多的还没有做哈~ 有需求的可以提出来
							layui.formSelects.data('example6_4', 'local', {
								arr: [
								    {
								        "name": "北京",
								        "value": 1,
								        "xslkdf": "123",
								        "children": [
								            {
								                "name": "朝阳",
								                "value": 11,
								                "children": [
								                    {"name": "酒仙桥", "value": 111},
								                    {"name": "望京东", "value": 121}
								                ]
								            },
								            {"name": "海淀", "value": 12}
								        ]
								    },
								    {
								        "name": "深圳",
								        "value": 2,
								        "children": [
								            {"name": "龙岗", "value": 21}
								        ]
								    }
								]
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_search" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7) 搜索控制">搜索控制</h3>
			<p>当输入内容为空时不触发搜索</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example7_1" xm-select-search></select>
						<js>
							layui.formSelects.config('example7_1', {
								searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data', 
								beforeSearch: function(id, url, val){
									if(!val){
										console.log('内容为空, 不进行远程搜索')
										return false;
									}
									return true;
								}
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
			<p>主动触发搜索</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example7_2" xm-select-search="https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data"></select>
						<js>
							layui.formSelects.search('example7_2', 'click');
						</js>
					</div>
				</div>
				<button class="layui-btn example-btn" onclick="formSelects.search('example7_2', 'click')">点我搜索查看选项变化</button>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_show_count" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8) 显示数量">显示数量</h3>
			<p>默认显示全部, 如果设置了高度的话就是显示指定范围内的label, 当然你也可以控制显示的数量</p>
			<p>xm-select-show-count="2", 最多显示2个, 多余的隐藏</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example8_1" xm-select-show-count="2">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
							<option value="6">郑州</option>
							<option value="7">合肥</option>
							<option value="8">邯郸</option>
							<option value="9">舟山</option>
							<option value="10">海南</option>
							<option value="11">南京</option>
							<option value="12">哈尔滨</option>
						</select>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_template" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9) 自定义模板">自定义模板</h3>
			<p>选项默认是显示的孤零零的name值, 你也可以自定义格式</p>
			<p>比如来一个左边name, 右边拼音的</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example9_1" xm-select-show-count="2" xm-select-search xm-select-search-type="dl">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
							<option value="6">郑州</option>
							<option value="7">合肥</option>
							<option value="8">邯郸</option>
							<option value="9">舟山</option>
							<option value="10">海南</option>
							<option value="11">南京</option>
							<option value="12">哈尔滨</option>
						</select>
						<js>
							layui.formSelects.render('example9_1', {
								template: function(name, value, selected, disabled){
									return name + '&lt;span style="position: absolute; right: 0; color: #A0A0A0; font-size: 12px;">' + PY.fullPY(name) + '&lt;/span>';
								}
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_search_type" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10) 搜索位置">搜索位置</h3>
			<p>默认是在title上的, 可以设置到选项中, 前提是你打开了搜索</p>
			<p>xm-select-search-type="dl"</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example10_1" xm-select-search xm-select-search-type="dl">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
						</select>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_tree" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11) 树状结构">树状结构</h3>
			<p>惊喜有没有, 树状结构来一发</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example11_1">
							<option value="">栽树乘凉</option>
						</select>
						<js>
							layui.formSelects.data('example11_1', 'local', {
								arr: [
									{name: '分组1', type: 'optgroup'},
									{name: '北京', value: 1, xslkdf: '123', children: [{name: '朝阳', disabled: true, value: 11}, {name: '海淀', value: 12}]},
									{name: '分组2', type: 'optgroup'},
									{name: '深圳', value: 2, children: [{name: '龙岗', value: 21}]},
								],
								tree: {
									//在点击节点的时候, 如果没有子级数据, 会触发此事件
									nextClick: function(id, item, callback){
										//需要在callback中给定一个数组结构, 用来展示子级数据
										callback([
											{name: 'test1', value: Math.random()},
											{name: 'test2', value: Math.random()}
										])
									},
								}
							});
							
							//这里也算是给自己挖了一手好坑吧, 简单的一种处理方式, 在多选第一次打开的时候收缩所有的子节点, 目前处理的很粗鲁, 就是为了一种效果, 收缩全部节点
							var isFirst = true;
							layui.formSelects.opened('example11_1', function(id){
								if(isFirst){
									isFirst = false;
									$('[fs_id="example11_1"]').find('.xm-cz i.icon-caidan').click();
								}
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		<div class="example">
			<h3 id="select_search_type" title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12) 监听打开关闭">监听打开关闭</h3>
			<p>监听下拉选框的打开与关闭</p>
			<div>
				<div style="width: 400px; display: inline-block; vertical-align: top;">
					<div class="layui-form">
						<select name="city" xm-select="example12_1">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
							<option value="4">深圳</option>
							<option value="5">天津</option>
						</select>
						<js>
							layui.formSelects.opened('example12_1', function(id){
								alert('打开了...');
							});
							layui.formSelects.closed('example12_1', function(id){
								alert('关闭了...');
							});
						</js>
					</div>
				</div>
				<button class="layui-btn layui-btn-normal example-show-code">查看代码</button>
			</div>
		</div>
		
		<blockquote class="layui-elem-quote layui-quote-nm" id="over">结尾</blockquote>
		<div class="chat over" style="display: inline-block;">
			<div class="example">
				<p>↓↓↓ 捐赠作者 ↓↓↓</p>
				<p>
					<img src="../static/img/wx.jpg" width="230px" style="border: 1px solid #009688">
				</p>
				<p>你们的支持, 是我们坚持的动力</p>
			</div>
<pre class="brush: js">
[2019-06-24] v4.x
-- 修复 --
1. 修复文档中因为https无法访问http接口的问题, 从 http://yapi.demo.qunar.com 更换为 https://www.fastmock.site
2. 一个简单的手段, 让树状结构能够收起来
3. 修改template中文档写法错误

其实天下没有不散的宴席, 目前来看 jQuery 已经成为了历史, 加油吧, 小伙伴, 努力向最新的技术看齐~~~

	
	
[2018-09-10] v4.0.0.0910
-- bug修复 --
1. 修改多级联动在li中不能使用
2. 修改多级联动在动态赋值中的错误
3. 修改非tree模式下的显示异常
4. 修改render的单独渲染异常
5. 修改template不能够获取到所有数据的问题
6. 修改默认disabled不正常的问题

	
[2018-08-17] v4.0.0.0817
-- bug修复 --
1.在多次render的时候快捷图标的错误
2.修改图标库的标记 `iconfont` -> `xm-iconfont`, 避免冲突

-- 修改 --
1. 树状结构支持收缩
2. 树状结构支持动态获取数据
3. 那个没有用的图标可以全部展开/收缩树状结构
4. 在4.1测试的select不删除拿到此版本使用
5. 更新render的渲染方式, 优化代码
6. 新增方法opened、closed, 可以监听多选的下拉展开与折叠
7. 新增config参数, 可以自定义response结构
8. !!!重点!!! 很多地方回调之前是val属性 -> value, 升级请仔细检查, 涉及: value, on, filter, maxTips
9. 貌似在所有方法中增加了自定义属性, 可以自行尝试


[2018-08-13] v4.0.0.0813
-- bug修复 --
1.修复value在为字符串时, 多级联动的bug
2.修复value在超过int最大值时, 多级联动的bug
3.修复在动态切换radio的时候, 快捷图标不发生变化的bug
4.修改在未渲染的select上调用render, 配置项不生效的bug

-- 修改 --
1.新增formSelects.data的赋值方式, 可以赋值有层级结构的数据
2.在template的时候可以获取到除了name, value以外的其他自定义值
3.同步4.1的on方式, 可以使用后置on获取实时数据 


[2018-07-13] v4.0.0.0713
-- bug修复 --
1.修复render使用searchType不生效
2.修复多级联动点击空白处报错
3.修正label上x号的图标
4.修正不同皮肤下复选框的border颜色色值不正确
5.修正clearInput不生效


[2018-07-11] v4.0.0.0711
-- bug修复 --
1.修复使用show-count模式后, 点击全选下拉框高度位置错误
2.修复当xm-select对应ID不存在时的报错问题
3.修复多级联动赋值不存在时出现//的问题
4.修复条目创建时没有传值搜索内容
5.修复条目创建时name取值错误

-- 修改 --
1.修改多选和单选的图标
2.radio模式下的快捷操作内置为清空
3.新增github pages文档, 迁移文档地址, 使用新的方式撰写


[2018-07-10] v4.0.0.0710
-- bug修复 --
1.修正版本号
2.修改下拉方向down时错误
3.删除横向滚动
4.删除all相关代码
5.修复某些情况下label高度缺失

	
[2018-07-06] v4.0.0.0706
-- 新增 --
1.修改固定高度为默认值34px;
2.当固定高度后, 已选择数据可以通过鼠标滚轮横向滚动
3.0702忘记说了, 新增点击分组名称选中该分组下的数据

-- bug修复 --
1.修复form表单不能正常验证

	
[2018-07-04] v4.0.0.0704
-- bug修复 --
1.修复了render方法的错误, 带来了一连串的影响...
2.修复有搜索内容无匹配直接关闭时, 仍显示无匹配项
3.修复当label为空时, 点击title关闭下拉placeholder不显示
4.修复当搜索框在下拉中时, label上仍然有一个50px的空白
5.修复当不开启搜索模式, label上仍然有一个50px的空白
	
	
[2018-07-02] v4.0.0.0702
-- 新增 --
1.重做了render方法, 支持了N多种操作, 比如多选->单选, 单选->多选
2.新增create创建处理, 也许动态创建的value你并不想使用时间戳~~
3.新增template方式, 你可以重新"画"选项结构
4.新增配置项xm-select-search-type, title|dl, 可以自由选择搜索框的显示位置, tips: 投票结果竟然相等
5.新增xm-select-show-count, 可以设置多选label的显示数量, 超出后隐藏
6.表单验证支持lay-verType

--bug修复--
1.修复当多次使用data函数时, 历史label中的数据不清空
2.修复config函数错误, 指定配置不生效

!! 取消对dom的监听, 不在自动渲染新增的select, 如需渲染, 调用formSelects.render
!! 取消formSelects.all.js, 请使用js + css模式
!! 每一次的更新都是为了更好的发展 ^_^


[2018-06-22] v4.0.0.0622
-- 新增 --
1.config新增beforeSearch方法, 用于确定是否触发搜索
2.config新增clearInput配置, 用于确定是否清空搜索内容
3.config新增searchVal配置, 可自定义搜索内容, 触发一次后失效, 优先级大于搜索框
4.btns新增配置, 可以自定义显示[图标/名称/全部, 间隔]
5.新增search方法, 可以使用js随时随地触发搜索;(只针对于远程搜索)

	
[2018-06-20] v4.0.0.0620
--bug修复--
1.修改联动模式下监听on的时候报错
2.修改pane inline模式下 边框消失的问题
3.想了很久, 还是把预置的快捷操作跳过了禁用的选项, 更新后快捷操作将不再操作被禁用的选项

-_- 也许你们真的感觉 config + data 不好用...
你们现在可以在data中写config参数了, 仅此而已, 具体示例查看 #select_data


[2018-06-18] v4.0.0.0618
--新增--
1.新增快捷操作, 可以 (全选,清空,反选,换肤)
2.新增btns方法, 可以自定义快捷操作
3.提供formSelects.all.js与formSelects.js, 其中formSelects.all.js是使用js的方式加载的css, 不需要手动引入, 而formSelects.js需要引入formSelects.css 

--bug修复--
1.搜索模式下, 点击选项后, 清空已输入数据
2.修复远程搜索赋值与取值时的数据异常与显示异常
3.如果是远程数据, 第一次将不会延迟500ms

接下来的formSelects将进入稳定阶段, 主要以bug修复为主 ^_^

	
[2018-06-13] v4.0.0.0613
这次算正式发布版本更新吧, 之前的都是出于完善 + 测试的阶段
--已有功能--
1.基础多选 + 多选分组
2.自定义提示
3.设置选择上限
4.更换友好的皮肤颜色, 当然如果不满意可以自行配置css
5.本地搜索 + 远程搜搜
6.创建不存在的条目
7.联动多选
更多的功能, 请查看文档自行尝试 ^_^

--新增+修改--
1.config中新增beforeSuccess, 可以在success之前处理数据, 格式化成formSelects需要的格式
2.config中新增keyChildren配置, 可配置联动多选的children key
3.新增链式语法, formSelects.config().on().filter().maxTips().disabled()...
4.弱化远程返回格式, 可省略code, msg, data字段, 直接返回数组
5.新增若干示例

--bug修复--
1.修改config中定义searchUrl后不能触发远程数据请求
2.修改on函数中的文档错误, return false是取消本次选择


[2018-05-28] v4
formSelects-v4, 静悄悄的, 愿它能够茁壮成长...


[2018-05-07] v3
formSelects-v3, 高速开发与更新, 功能越来越多了, 代码越来越看不懂了...


[2018-04-20] v2
formSelects-v2, 粗暴的升级了v1...


[2017-08-29] v1
formSelects-v1, 一个简简单单的layui多选...
</pre>	
		</div>
		<div style="height: 300px;"></div>

<script type="syntaxhighlighter" xid="use" class="brush: js"><![CDATA[
//1.下载formSelects-v4

//然后引入formSelects.css
&lt;link rel="stylesheet" href="formSelects-v4.css" />

//2.模块化使用
&lt;script src="layui.js" type="text/javascript" charset="utf-8">&lt;/script>
&lt;script type="text/javascript">
	//全局定义一次, 加载formSelects
	layui.config({
		base: '../src/'	//此处路径请自行处理, 可以使用绝对路径
	}).extend({
		formSelects: 'formSelects-v4'
	});
	//加载模块
	layui.use(['jquery', 'formSelects'], function(){
		var formSelects = layui.formSelects;
		
	});
&lt;/script>

//3.非模块化使用
&lt;script src="layui.all.js" type="text/javascript" charset="utf-8">&lt;/script>
&lt;script src="formSelects-v4.js" type="text/javascript" charset="utf-8">&lt;/script>
&lt;script type="text/javascript">
	var formSelects = layui.formSelects;
	
&lt;/script>
]]></script>

<script type="syntaxhighlighter" xid="value" class="brush: js"><![CDATA[
/**
 * 1.获取选中数据
 *
 * formSelects.value(ID, TYPE);
 *
 * @param ID 	xm-select的值
 * @param TYPE 	all | val | valStr | name | nameStr
 */
var formSelects = layui.formSelects;
formSelects.value('select1');				// [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'all');		// [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'val');		// ["2","4"]
formSelects.value('select1', 'valStr');		// 2,4
formSelects.value('select1', 'name');		// ["上海","深圳"]
formSelects.value('select1', 'nameStr');	// 上海,深圳


/**
 * 2.设置select的选中值
 *
 * formSelects.value(ID, ARR);
 *
 * @param ID 	xm-select的值
 * @param ARR 	value数组
 */
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4]);		// 选中value为2和4的option → 上海,深圳


/**
 * 3.追加或删除select的选中值
 *
 * formSelects.value(ID, ARR, isAppend);
 *
 * @param ID 	xm-select的值
 * @param ARR 	value数组
 */
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4], true);	// 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中
]]></script>

<script type="syntaxhighlighter" xid="on" class="brush: js"><![CDATA[
/**
 * 1.监听select的选中与取消
 *
 * formSelects.on(ID, Function);
 *
 * @param ID 		xm-select的值
 * @param Function 	自定义处理方法
 * @param isEnd 	是否获取实时数据, true/false
 */
var formSelects = layui.formSelects;
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
	//id: 			点击select的id
	//vals:			当前select已选中的值
	//val:			当前select点击的值
	//isAdd:		当前操作选中or取消
	//isDisabled:	当前选项是否是disabled
	
	//如果return false, 那么将取消本次操作
	return false;	
});

//以下两种方式则配置所有的多选select
formSelects.on(function(id, vals, val, isAdd, isDisabled){
	...
});
formSelects.on(null, function(id, vals, val, isAdd, isDisabled){
	...
});

//4.0.0.0813版本之前, 受到了颇多的小伙伴吐槽, 此版本加上了获取实时数据的方法
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
	//id: 			点击select的id
	//vals:			当前select已选中的值
	//val:			当前select点击的值
	//isAdd:		当前操作选中or取消
	//isDisabled:	当前选项是否是disabled
	
}, true);

]]></script>

<script type="syntaxhighlighter" xid="maxTips" class="brush: js"><![CDATA[
/**
 * 1.多选select超出最大值的提示, 默认闪烁红色边框
 *
 * formSelects.maxTips(ID, Function);
 *
 * @param ID 		xm-select的值
 * @param Function 	自定义处理方法
 */
var formSelects = layui.formSelects;
formSelects.maxTips('select1', function(id, vals, val, max){
	//id: 	点击select的id
	//vals:	当前select已选中的值
	//val:	当前select点击的值
	//max:	当天多选最大值
	alert("选超了...");
});

//以下两种方式则配置所有的多选select
formSelects.maxTips(function(id, vals, val, max){
	...
});
formSelects.maxTips(null, function(id, vals, val, max){
	...
});
]]></script>

<script type="syntaxhighlighter" xid="filter" class="brush: js"><![CDATA[
/**
 * 1.自定义本地搜索过滤方式, 默认匹配文本是否包含
 *
 * formSelects.filter(ID, Function);
 *
 * @param ID 		xm-select的值
 * @param Function 	自定义处理方法
 */
var formSelects = layui.formSelects;
formSelects.filter('select1', function(id, inputVal, val, isDisabled){
	//id: 			点击select的id
	//inputVal:		当前input搜索框中的数值
	//val:			格式: {"name":"上海","val":"2"}
	//isDisabled:	当前options是否被禁用
	
	//return true时该选项被过滤, 隐藏不显示
	return true;
});

//以下两种方式则配置所有的多选select
formSelects.filter(function(id, inputVal, val, isDisabled){
	...
});
formSelects.filter(null, function(id, inputVal, val, isDisabled){
	...
});
]]></script>

<script type="syntaxhighlighter" xid="config" class="brush: js"><![CDATA[
/**
 * 1.配置远程搜索, 请求头, 请求参数, 请求类型等
 *
 * formSelects.config(ID, Options, isJson);
 *
 * @param ID 		xm-select的值
 * @param Options 	配置项
 * @param isJson 	是否传输json数据, true将添加请求头 Content-Type: application/json; charset=UTF-8
 */
var formSelects = layui.formSelects;
formSelects.config('select1', {
	type: 'get',				//请求方式: post, get, put, delete...
	header: {},					//自定义请求头
	data: {},					//自定义除搜索内容外的其他数据
	searchUrl: '',				//搜索地址, 默认使用xm-select-search的值, 此参数优先级高
	searchName: 'keyword',		//自定义搜索内容的key值
	searchVal: '',				//自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
	keyName: 'name',			//自定义返回数据中name的key, 默认 name
	keyVal: 'value',			//自定义返回数据中value的key, 默认 value
	keySel: 'selected',			//自定义返回数据中selected的key, 默认 selected
	keyDis: 'disabled',			//自定义返回数据中disabled的key, 默认 disabled
	keyChildren: 'children',	//联动多选自定义children
	delay: 500,					//搜索延迟时间, 默认停止输入500ms后开始搜索
	direction: 'auto',			//多选下拉方向, auto|up|down
	response: {
		statusCode: 0,          //成功状态码
		statusName: 'code',     //code key
		msgName: 'msg',         //msg key
		dataName: 'data'        //data key
	},
	success: function(id, url, searchVal, result){		//使用远程方式的success回调
		console.log(id);		//组件ID xm-select
		console.log(url);		//URL
		console.log(searchVal);	//搜索的value
		console.log(result);	//返回的结果
	},
	error: function(id, url, searchVal, err){			//使用远程方式的error回调
		//同上
		console.log(err);	//err对象
	},
	beforeSuccess: function(id, url, searchVal, result){		//success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧
		console.log(id);		//组件ID xm-select
		console.log(url);		//URL
		console.log(searchVal);	//搜索的value
		console.log(result);	//返回的结果
		
		return result;	//必须return一个结果, 这个结果要符合对应的数据结构
	},
	beforeSearch: function(id, url, searchVal){			//搜索前调用此方法, return true将触发搜索, 否则不触发
		if(!searchVal){//如果搜索内容为空,就不触发搜索
			return false;
		}
		return true;
	},
	clearInput: false, 			//当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
}, true);

//以下两种方式则配置所有的多选select
formSelects.config('select1', {
	...
}, false);
formSelects.config(null, {
	...
}, false);
]]></script>

<script type="syntaxhighlighter" xid="render" class="brush: js"><![CDATA[
/**
 * 1.重新渲染, 如果已经是多选则重置为初始值, 如果是初始select则渲染为多选 
 * 2.支持渲染时候改变多个参数
 *
 * formSelects.render(ID);
 *
 * @param ID 		xm-select的值
 */
var formSelects = layui.formSelects;
formSelects.render('select1', {
	init: ["1", "2"],				//默认值
	skin: "danger",					//多选皮肤
	height: "auto",					//是否固定高度, 38px | auto
	radio: false,					//是否设置为单选模式
	direction: "auto",
	create: function(id, name){
		console.log(id);	//多选id
		console.log(name);	//创建的标签名称
		
		return Date.now();	//返回该标签对应的val
	},			
	filter: fun...,			//同formSelects.filter			
	max: 3,					//多选最多选择量			
	maxTips: fun...,		//同formSelects.maxTips
	on: fun...,				//同formSelects.on
	searchType: "title",	//搜索框的位置			
	template: function(name, value, selected, disabled){
		console.log(name);		//选项名
		console.log(value);		//选项值
		console.log(selected);	//是否被选中
		console.log(disabled);	//是否被禁用
		
		//例如: 反转字符串
		//return name.split('').reverse().join('');
		return name;		//返回一个html结构, 用于显示选项
	},
	showCount: 0, 			//多选的label数量, 0,负值,非数字则显示全部
});

//以下方式则重新渲染所有的已存在多选
formSelects.render();
]]></script>

<script type="syntaxhighlighter" xid="disabled" class="brush: js"><![CDATA[
/**
 * 1.禁用多选
 *
 * formSelects.disabled(ID);
 *
 * @param ID 		xm-select的值
 */
var formSelects = layui.formSelects;
formSelects.disabled('select1');

//以下方式则禁用所有的已存在多选
formSelects.disabled();
]]></script>

<script type="syntaxhighlighter" xid="undisabled" class="brush: js"><![CDATA[
/**
 * 1.启用多选, 启用被禁用的多选
 *
 * formSelects.undisabled(ID);
 *
 * @param ID 		xm-select的值
 */
var formSelects = layui.formSelects;
formSelects.undisabled('select1');

//以下方式则启用所有的已存在多选
formSelects.undisabled();
]]></script>

<script type="syntaxhighlighter" xid="data" class="brush: js"><![CDATA[
/**
 * 1.多选数据赋值
 *
 * formSelects.data(ID, type, config);
 *
 * @param ID 			xm-select的值
 * @param type 			'local' | 'server', 本地数据或者远程数据
 * @param config 		配置项
 * 			arr				本地数据数组
 * 			url				远程数据链接
 * 			keyword			远程数据搜索内容, 其他附加数据可以使用 formSelects.config设置
 * 			linkage			是否为联动多选
 * 			linkageWidth	联动多选没级宽度
 */

//以下代码可以在console中运行测试, 结果查看基础示例第一个
var formSelects = layui.formSelects;

//local模式
formSelects.data('select1', 'local', {
	arr: [
		{"name": "分组-1", "type": "optgroup"},
        {"name": "北京", "value": 1},
        {"name": "上海", "value": 2},
        {"name": "分组-2", "type": "optgroup"},
        {"name": "广州", "value": 3},
        {"name": "深圳", "value": 4},
        {"name": "天津", "value": 5}
	]
});

//server模式
formSelects.data('select1', 'server', {
    url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
    keyword: '水果'
});
//server返回数据与远程搜索数据结构一致
{
	"code":0,
	"msg":"success",
	"data":[
		{"name":"北京","value":1,"selected":"","disabled":""},
		{"name":"上海","value":2,"selected":"","disabled":""},
		{"name":"广州","value":3,"selected":"selected","disabled":""},
		{"name":"深圳","value":4,"selected":"","disabled":"disabled"},
		{"name":"天津","value":5,"selected":"","disabled":""}
	]
}
//当然你也可以偷懒, 返回如下结构
[
	{"name":"北京","value":1,"selected":"","disabled":""},
	{"name":"上海","value":2,"selected":"","disabled":""},
	{"name":"广州","value":3,"selected":"selected","disabled":""},
	{"name":"深圳","value":4,"selected":"","disabled":"disabled"},
	{"name":"天津","value":5,"selected":"","disabled":""}
]

/*************** 华丽的分割线 ***************/
//来一个树状结构的数据
formSelects.data('select15', 'local', {
	arr: [
		{name: '北京', value: 1, xslkdf: '123', children: [
			{name: '朝阳', value: 11}, 
			{name: '海淀', value: 12}
		]},
		{name: '深圳', value: 2, children: [{name: '龙岗', value: 21}]},
	]
});


/*************** 华丽的分割线 ***************/
//联动多选数据格式
//local, 注意 value值请保证唯一
formSelects.data('select15', 'local', {
    arr: [
        {
            "name": "北京", 
            "value": 1, 
            "children": [
                {"name": "北京市1", "value": 12, "children": [
                    {"name": "朝阳区1", "value": 13, "children": []},
                    {"name": "朝阳区2", "value": 14, "children": []},
                    {"name": "朝阳区3", "value": 15, "children": []},
                    {"name": "朝阳区4", "value": 16, "children": []},
                ]},
                {"name": "北京市2", "value": 17, "children": []},
                {"name": "北京市3", "value": 18, "children": []},
                {"name": "北京市4", "value": 19, "children": []},
            ]
        },
        {
            "name": "天津", 
            "value": 2, 
            "children": [
                {"name": "天津市1", "value": 51, "children": []},
            ]
        },
    ],
    linkage: true	//开启联动模式
});

//server
formSelects.data('select15', 'server', {
    url: 'http://yapi.demo.qunar.com/mock/9813/layui/citys',
    linkage: true,
    linkageWidth: 130	//代表每一级别的宽度, 默认是100
});
//server返回数据, 同上 value不能重复
{
	"code":0,
	"msg":"success",
	"data":[
        {
            "name": "北京", 
            "value": 1, 
            "children": [
                {"name": "北京市1", "value": 12, "children": [
                    {"name": "朝阳区1", "value": 13, "children": []},
                    {"name": "朝阳区2", "value": 14, "children": []},
                    {"name": "朝阳区3", "value": 15, "children": []},
                    {"name": "朝阳区4", "value": 16, "children": []},
                ]},
                {"name": "北京市2", "value": 17, "children": []},
                {"name": "北京市3", "value": 18, "children": []},
                {"name": "北京市4", "value": 19, "children": []},
            ]
        },
        {
            "name": "天津", 
            "value": 2, 
            "children": [
                {"name": "天津市1", "value": 51, "children": []},
            ]
        },
    ]
}

]]></script>

<script type="syntaxhighlighter" xid="btns" class="brush: js"><![CDATA[
/**
 * 1.快捷操作
 *
 * formSelects.btns(ID, BTNS, config);
 *
 * @param ID 		xm-select的值
 * @param BTNS 		定义操作列表, 内置三种操作, select:全选, remove:清空, skin:换肤, 当然你可以自定义
 * @param config 	配置操作列表, config.show='name' 只显示名称, config.show='icon' 只显示图标, config.space='30px' 两个操作之间的间隔
 */
var formSelects = layui.formSelects;
//默认设置了 全选, 清空, 反选
//如下设置内置操作
formSelects.btns('select1', ['select', 'remove', 'reverse']);

//如下设置自定义
formSelects.btns('select1', ['select', 'remove', 'skin', {
	icon: 'layui-icon layui-icon-ok',	//自定义图标, 可以使用layui内置图标
	name: '提示名称',
	click: function(id){
		//点击后的操作
		alert('点击了自定义快捷操作')
	}
}]);

//配置只显示名称,紧凑型, 适合宽度较窄的情况
formSelects.btns('select1', ['select', 'remove'], {show: 'name', space: '10px'});

//如下写法定义所有的多选
formSelects.btns(['select', 'remove', 'skin']);

// !!友情提示: name不能重复
]]></script>

<script type="syntaxhighlighter" xid="search" class="brush: js"><![CDATA[
/**
 * 1.触发搜索
 *
 * formSelects.search(ID, val);
 *
 * @param ID 		xm-select的值
 * @param BTNS 		搜索内容
 */
var formSelects = layui.formSelects;

//使用js主动触发搜索
formSelects.search('select1', '关键内容');

]]></script>

<script type="syntaxhighlighter" xid="opened" class="brush: js"><![CDATA[
/**
 * 1.打开下拉框的回调事件
 *
 * formSelects.opened(ID);
 *
 * @param ID 		xm-select的值
 */
var formSelects = layui.formSelects;

//监听下拉框的打开
formSelects.opened('select1', function(id){
	console.log('打开了');
});

//如下定义所有
formSelects.opened(null, function(id){
	console.log('打开了');
});
formSelects.opened(function(id){
	console.log('打开了');
});

]]></script>

<script type="syntaxhighlighter" xid="closed" class="brush: js"><![CDATA[
/**
 * 1.关闭下拉框的回调事件
 *
 * formSelects.closed(ID);
 *
 * @param ID 		xm-select的值
 */
var formSelects = layui.formSelects;

//监听下拉框的关闭
formSelects.closed('select1', function(id){
	console.log('合上了');
});

//如下定义所有
formSelects.closed(null, function(id){
	console.log('合上了');
});
formSelects.closed(function(id){
	console.log('合上了');
});

]]></script>
		<script src="../UI/jquery-v3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			if(!Array.prototype.map){Array.prototype.map=function(i,h){var b,a,c,e=Object(this),f=e.length>>>0;if(h){b=h}a=new Array(f);c=0;while(c<f){var d,g;if(c in e){d=e[c];g=i.call(b,d,c,e);a[c]=g}c++}return a}};
			var htmls = {};
			$('.example > div > div > select').each(function(index, item){
				var html = item.outerHTML.split('\n');
				var last = html[html.length - 1];
				var space = last.substr(0, last.indexOf('<'));
				htmls[item.getAttribute('xm-select')] = item.outerHTML.split('\n').map(function(item){
					return item.replace(space, '');
				}).join('\n');
			});
			$('.example > div > div > .layui-form,.example > div > form > div > .layui-form').each(function(index, item){
				var html = item.outerHTML.split('\n');
				var last = html[html.length - 1];
				var space = last.substr(0, last.indexOf('<'));
				$(item).find('.layui-form-select').remove()
				htmls[$(item).find('select[xm-select]').attr('xm-select')] = item.outerHTML.split('\n').map(function(item){
					return item.replace(space, '');
				}).join('\n');
			});
		</script>
		<script src="../UI/SyntaxHighlighter-3.0.83/shCore.js"></script>
		<script src="../UI/SyntaxHighlighter-3.0.83/shBrushJScript.js"></script>
		<script src="../UI/layui-v2.3.0-rc1/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../UI/js-pinyin.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			SyntaxHighlighter.defaults["quick-code"] = false;
			SyntaxHighlighter.defaults["gutter"] = false;
			SyntaxHighlighter.all();
			
			var formSelects = layui.formSelects;
			
			layui.use(['layer'], function(){
				//生成目录结构
				var layer = layui.layer;
				var content = '<ul class="sun-menu" style="overflow: auto; max-height: 70vh">';
				$('body *[id]:not(.syntaxhighlighter)').each(function(index, item){
					item = $(item);
					content += '<li><a href="#'+item.attr("id")+'">'+(item.attr('title') ? item.attr('title') : item.html())+'</a></li>'
				});
				content += '</ul>';
				layer.open({
					title: '目录',
					offset: 'rt',
					btn: [],
					shade: 0,
					move: false,
					content: content,
					success: function(layero, index) {
						layer.style(index, {
							top: 50,
							minWidth: 0,
							width: 'auto',
							left: 'auto',
							right: 10,
						});
						var layero = $(layero);
						layero.on('hover', '*', function(){
							layero.css('z-index', '20000000');
						});
					}
				});
			});
			
			
			//填充内容
			$('body script[xid]').each(function(index, item){
				var id = item.getAttribute('xid');
				$('body [sid="'+id+'"]').html(item.outerHTML);
				$(item).remove();
			});
			
			//查看代码
			$(document).on('click', '.example-show-code', function(e){
				var that = $(e.target);
				var select = htmls[that.parent().find('[xid]').attr('xid')];
				if(that.text().indexOf('查看') != -1){
					var pre = $('<script type="syntaxhighlighter" xid="config" class="brush: js">&lt;/script>');
					pre.html(select);
					that.after(pre);
					SyntaxHighlighter.highlight();
					that.text('隐藏代码');
				}else{
					that.next().remove();
					that.text('查看代码');
				}
			});
			
			setTimeout(function(){
				SyntaxHighlighter.highlight();
			}, 200);
			
			var v = formSelects.v;
			if(!localStorage.getItem(v)){
				var logs = $('#over').next();
				layui.use('layer', function(layer){
					layer.open({
						title: '更新记录',
						type: 1,
						scrollbar: false,
						shadeClose: true,
						area: ["80vw"],
						content: '<div style="padding: 10px" id="history-info">' + logs.html() + '</div>',
						success: function(){
							setTimeout(function(){
								$('#history-info .line :contains("["):contains("v")').attr('style', 'font-weight: bold !important; color: #01AAED !important;');
							}, 1000);
						}
					});
				});
				localStorage.setItem(v, v);
			}
			setTimeout(function(){
				$('.over .line :contains("["):contains("v")').attr('style', 'font-weight: bold !important; color: #01AAED !important;');
			}, 1000);
			
			//示例操作
			layui.use('form', function(){
				var form = layui.form;
				
				form.verify({
					select14: function(value, item){
						var count = value ? value.split(",").length : 0;
						if(count < 3){
							return '当前value: '+value+', 只选择了'+count+'项.'
						}
						alert('验证通过!');
					},
				});
				form.on('submit(select14)', function(data){
				  	return false;
				});
				
			});
			
			formSelects.data('select15', 'local', {
			    arr: [
			        {
			        	"name": "北京", 
			        	"value": 1, 
			        	"children": [
							{"name": "北京市1", "value": 12, "children": [
								{"name": "朝阳区1", "value": 13, "children": []},
								{"name": "朝阳区2", "value": 14, "children": []},
								{"name": "朝阳区3", "value": 15, "children": []},
								{"name": "朝阳区4", "value": 16, "children": []},
							]},
							{"name": "北京市2", "value": 17, "children": []},
							{"name": "北京市3", "value": 18, "children": []},
							{"name": "北京市4", "value": 19, "children": []},
			        	]
					},
					{
			        	"name": "天津", 
			        	"value": 2, 
			        	"children": [
							{"name": "天津市1", "value": 51, "children": []},
			        	]
					},
			    ],
			    linkage: true
			});
			
			formSelects.config({
				success: function(id, url, val, result){
					console.log("success回调: " + url, id);
				},
				error: function(id, url, val, err){
					console.log("err回调: " + url, id);
				}
			});
			formSelects.data('select15_2', 'server', {
			    url: 'http://yapi.demo.qunar.com/mock/9813/layui/citys',
			    linkage: true,
			    linkageWidth: 130,
			});
			
			//进阶示例
			formSelects.on('example1', function(id, vals, val, isAdd, isDisabled){
				alert("选择了: " + val.name);
				if(val.value == 1){
					return false;
				}
			});
			formSelects.on('example1_1', function(id, vals, val, isAdd, isDisabled){
				alert("当前选择了: " + JSON.stringify(vals));
			}, true);
			formSelects.maxTips('example3', function(id, vals, val, max){
			    alert("选超了, 选择的值: " + val.value);
			});
			formSelects.filter('example4', function(id, inputVal, val, isDisabled){
			    if(
			    	PY.fullPY(val.name).toLowerCase().indexOf(inputVal) != -1 ||
			    	PY.fullPY(val.name, true).indexOf(inputVal) != -1 ||
			    	val.name.indexOf(inputVal) != -1
			   	){
			    	return false;
			    }
			    return true;
			});
			formSelects.config('example5_1', {
				searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data'
			});
			formSelects.config('example5_3', {
				searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
				beforeSuccess: function(id, url, searchVal, result){
					//我要把数据外层的code, msg, data去掉
					result = result.data;
					//我要反转name
					$.each(result, function(index, item) {
						item.name && (item.name = item.name.split('').reverse().join(''))
					});
					//然后返回数据
					return result;
				}
			});
			formSelects.config('example5_4', {
				searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
				success: function(id, url, searchVal, result){
					formSelects.value('example5_4', [3, 4]);
				}
			});
			formSelects.config('example5_5', {
				searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
				success: function(id, url, searchVal, result){
					formSelects.value('example5_5', [result.data[0].value, result.data[4].value]);
				}
			});
			formSelects.data('example6_1', 'local', {
			    arr: [
			        {"name": "分组-1", "type": "optgroup"},
			        {"name": "北京", "value": 1},
			        {"name": "上海", "value": 2},
			        {"name": "分组-2", "type": "optgroup"},
			        {"name": "广州", "value": 3},
			        {"name": "深圳", "value": 4},
			        {"name": "天津", "value": 5}
			    ]
			});
			formSelects.config('example6_2', {
				beforeSuccess: function(id, url, searchVal, result){
					result = result.data;
					$.each(result, function(index, item) {
						item.name && (item.name = item.name.split('').reverse().join(''))
					});
					return result;
				}
			}).data('example6_2', 'server', {
			    url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data'
			});
			formSelects.data('example6_3', 'server', {
			    url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
			    beforeSuccess: function(id, url, searchVal, result){
					//我要把数据外层的code, msg, data去掉
					result = result.data;
					//我要反转name
					$.each(result, function(index, item) {
						item.name && (item.name = item.name.split('').reverse().join(''))
					});
					//然后返回数据
					return result;
				},
				success: function(id, url, searchVal, result){
					console.log('id: example6_3, 成功返回数据!!!');
				}
			});
			formSelects.data('example6_4', 'local', {
				arr: [
					{name: '北京', value: 1, xslkdf: '123', children: [
						{name: '朝阳', value: 11, children: [
							{name: '酒仙桥', value: 111}, {name: '望京东', value: 121}
						]}, {name: '海淀', value: 12}
					]},
					{name: '深圳', value: 2, children: [{name: '龙岗', value: 21}]},
				]
			});
			formSelects.config('example7_1', {
				searchUrl: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data', 
				beforeSearch: function(id, url, val){
					if(!val){
						console.log('内容为空, 不进行远程搜索')
						return false;
					}
					return true;
				}
			});
			formSelects.render('example9_1', {
				template: function(id, {name, value, selected, disabled}){
					return name + '<span style="position: absolute; right: 0; color: #A0A0A0; font-size: 12px;">' + PY.fullPY(name) + '</span>';
				}
			});
			formSelects.data('example11_1', 'local', {
				arr: [
					{name: '分组1', type: 'optgroup'},
					{name: '北京', value: 1, xslkdf: '123', children: [{name: '朝阳', disabled: true, value: 11}, {name: '海淀', value: 12}]},
					{name: '分组2', type: 'optgroup'},
					{name: '深圳', value: 2, children: [{name: '龙岗', value: 21}]},
				],
				tree: {
					//在点击节点的时候, 如果没有子级数据, 会触发此事件
					nextClick: function(id, item, callback){
						callback([
							{name: 'test1', value: Math.random()},
							{name: 'test2', value: Math.random()}
						])
					},
				}
			});
			var isFirst = true;
			formSelects.opened('example11_1', function(id){
				if(isFirst){
					isFirst = false;
					$('[fs_id="example11_1"]').find('.xm-cz i.icon-caidan').click();
				}
			});
			
			formSelects.opened('example12_1', function(id){
				alert('打开了...');
			}).closed('example12_1', function(id){
				alert('关闭了...');
			});
			
			formSelects.btns('select16_1', ['select', 'remove', 'reverse', 'skin']);
			formSelects.btns('select16_2', ['select', 'remove', 'skin', {
			    icon: 'layui-icon layui-icon-ok',   //自定义图标, 可以使用layui内置图标
			    name: '提示名称',
			    click: function(id){
			        //点击后的操作
			        alert('点击了自定义快捷操作')
			    }
			}]);
			formSelects.btns('select16_3', ['skin', {
			    icon: 'layui-icon layui-icon-ok',   //自定义图标, 可以使用layui内置图标
			    name: '提示名称',
			    click: function(id){
			        //点击后的操作
			        alert('点击了自定义快捷操作')
			    }
			}, 'remove']);
			formSelects.btns('select16_4', []);
			formSelects.btns('select16_5', ['select', 'remove'], {show: 'icon'});
			formSelects.btns('select16_6', ['select', 'remove'], {show: 'name'});
			formSelects.btns('select16_7', ['select', 'remove'], {show: '', space: '10px'});
			
		</script>
	</body>

</html>
